<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <!-- import CSS -->
    <link rel="stylesheet" href="https://cdn.staticfile.org/element-ui/2.15.9/theme-chalk/index.css">
</head>
<body>
    <div id="app">
      <el-form label-width="100">
        <el-form-item label="上传图片">
          <el-upload
                  action="/upload/images"
                  name="imageFile"
                  limit="1"
                  multiple="false"
                  list-type="picture-card"
                  :on-preview="handlePictureCardPreview"
                  :on-success="handleSuccess"
                  :on-remove="handleRemove">
            <i class="el-icon-plus"></i>
          </el-upload>
          <el-dialog :visible.sync="dialogVisible">
            <img width="100%" :src="dialogImgUrl">
          </el-dialog>
        </el-form-item>
      </el-form>
    </div>
    <!-- import Vue before Element -->
    <script src="https://cdn.staticfile.org/vue/2.6.14/vue.min.js"></script>
    <!-- import JavaScript -->
    <script src="https://cdn.staticfile.org/element-ui/2.15.9/index.min.js"></script>
    <!-- 引入axios -->
    <script src="https://cdn.staticfile.org/axios/0.21.4/axios.min.js"></script>
    <script type="text/javascript">
      var vue = new Vue({
        el: "#app",
        data: {
          dialogImgUrl: '',
          dialogVisible: false,
          url: ''
        },
        methods: {
          handlePictureCardPreview(file) {
            console.log("处理预览");
            this.dialogImgUrl = file.url;
            this.dialogVisible = true;
          },
          handleSuccess(res, file) {
            console.log("上传成功");
            this.url = res.data;
            console.log(res);
            console.log(file);
          },
          handleRemove(file, fileList) {
            console.log("删除图片");
            console.log(file, fileList);
            axios.delete("/upload/images", {data: file.response}).then(res => {
              console.log(res);
            }).catch(err => {
              console.log(err)
              v.$message.error("删除失败");
            })
          }
        }
      })
    </script>
</body>
</html>